<template>
    <div id="insur-result">
        <my-header></my-header>
        <div class="result">
            <div class="pay-sucess" v-show="status > 0">
                <dl class="title">
                    <dt>
                        <img src="~assets/img/common/duigou.png" alt="">
                    </dt>
                    <dd>承保成功！</dd>
                </dl>
                <table class="insur-num">
                    <tbody>
                    <tr>
                        <td>保单号：</td>
                        <td>{{ policyNo }}</td>
                    </tr>
                    <tr>
                        <td>产品名称：</td>
                        <td>平安千万尊旅意外伤害保险</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <!--<div class="pay-fail" v-show="status < 0">-->
            <!--<dl>-->
            <!--<dt>-->
            <!--<img src="~assets/img/common/pay_fail.png" alt="">-->
            <!--</dt>-->
            <!--<dd>很抱歉，投保失败</dd>-->
            <!--<dd>网络异常未完成扣款，建议您返回上页重新支付</dd>-->
            <!--</dl>-->
            <!--</div>-->
            <div class="query-fail" v-show="status < 0">
                <dl class="title">
                    <dt>
                        <img src="~assets/img/dearGuest/query_fail.png" alt="">
                    </dt>
                    <dd>查询失败</dd>
                </dl>
                <p>请移步平安金管家查看承保结果</p>
            </div>
            <div v-show="status">
                <p class="info">您可下载【平安金管家】APP，登录保单模块——我的保单，查看您的电子保单</p>
                <!--已安装，立即查看电子保单-->
                <div class="confirm-btn-wrap ui-ta-c">
                    <a class="confirm-btn" @touchend="go" :url="installUrl">已安装，立即查看电子保单</a></div>
                <div class="confirm-btn-wrap ui-ta-c">
                    <a class="confirm-btn" :href="uninstallUrl">立即安装【平安金管家】</a></div>
            </div>
        </div>
        <div class="query" v-show="!status">
            <dl class="title">
                <dt>
                    <img src="~assets/img/common/checking.png">
                </dt>
                <dd>请稍后</dd>
            </dl>
            <p>正在努力为您查询承保结果......</p>
        </div>
    </div>
</template>
<script>
  import { API, RESULT_CALLBACK_ORIGIN, isIos, isAndroid, isWx } from 'config'
  import { mapGetters, mapActions, mapMutations } from 'vuex'
  import MyHeader from 'components/myHeader'

  export default {
    name: 'Result',
    data() {
      return {
        status: 0, // 加载框: 0, 成功: 1, 失败: -1
        policyNo: '',
        installUrl: 'palifeapp://HtmlStartActivity/OpenApp?requestCode=07',
        uninstallUrl: (() => {
          /**
           * iOS浏览器 ：http://m.pingan.com/e1
           android浏览器：http://m.pingan.com/e2
           微信浏览器：http://a.app.qq.com/o/simple.jsp?pkgname=com.pingan.lifeinsurance
           */
          if (isWx) {
            return 'http://a.app.qq.com/o/simple.jsp?pkgname=com.pingan.lifeinsurance'
          }
          else if (isIos) {
            return 'http://m.pingan.com/e1'
          }
          else if (isAndroid) {
            return 'http://m.pingan.com/e2'
          } else {
            // wx
            return 'http://a.app.qq.com/o/simple.jsp?pkgname=com.pingan.lifeinsurance'
          }
          return
        })(),
        clientInfo: JSON.parse(sessionStorage.getItem('indexData')) || {}
      }
    },
    computed: {
      ...mapGetters(['resultData'])
    },
    components: {
      MyHeader
    },
    created() {
      (() => {
        // 初始化
        const insureFormData = () => {
          let insureData = JSON.parse(sessionStorage.getItem('insureFormData'))
          insureData && (insureData['noLoading'] = true)
          if (insureData) {
            delete insureData.addBenefnoFlag
            if (!insureData.benefitFlag) {
              delete insureData.beneficiarys
            }
            else {
                insureData.beneficiarys = JSON.stringify(insureData.beneficiarys)
            }
          }
          return insureData
        }
        this.$http.post(`${API}/auditTravelPolicy.shtml`, insureFormData())
        .then((response) => {
          let _self = this
          let result = JSON.parse(response.body)
          // 缓存地址，回调函数中取不到？
          let result_callback_orgin = RESULT_CALLBACK_ORIGIN
          if (result.status === 'Y') {
            console.log('success')
            this.status = 1
            let age = (new Date()).getFullYear() - Number(this.clientInfo.birthday.substr(0, 4))
            let success_url = `${result_callback_orgin}/service/jsonpService/behavior/add?
                callback=abc
                &orderNo=${result.policyNo}
                &agentNo=${_self.clientInfo.agentNo}
                &productName=${encodeURIComponent('平安千万尊旅意外伤害保险')}
                &productCode=1002
                &insName=${_self.clientInfo.applicantName}
                &insSex=${_self.clientInfo.sex}
                &insAge=${age}
                &insMobile=${_self.clientInfo.mobileNo}
                &documentStatus=5
                &source=zeb
                `.replace(/(\n|%20|\t|\s)+/g, '')
            setTimeout(() => {
              this.$http.jsonp(success_url)
              .then((response) => {
                console.log('success callback')
              })
            }, 300)
            this.policyNo = result.policyNo
          }
          else {
            this.status = -1
          }
        })
        .catch(function(response) {
          this.status = -1
          console.log('error')
        })
      })()
    },
    methods: {
      ...mapActions(['showLoading', 'hideLoading', 'showAlert', 'hideAlert']),
      go: function(e) {
        if (isWx) {
          this.$store.dispatch('showAlert', '请直接打开金管家查看')
        }
        else {
          location.replace(e.target.getAttribute('url'))
        }
      }
    }
  }


</script>
<style lang="scss">
    #insur-result {
        color: #333;
        padding-top: 1rem;
        text-align: center;
        height: 100%;
        .result {
            .pay-sucess {
                background: #fff;
                .insur-num {
                    font-size: 0.28rem;
                    color: #666;
                    width: 100%;
                    letter-spacing: 0.04rem;
                    td {
                        padding-bottom: 0.3rem;

                    }
                    td:first-child {
                        text-align: right;
                    }
                    td:last-child {
                        text-align: left;
                    }
                }
            }
            .info {
                font-size: 0.22rem;
                margin: 0.44rem 0.3rem;
                color: #666;
                text-align: left;
            }
            .query-fail, .pay-fail {
                background: #fff;
                padding-bottom: 0.4rem;
                font-size: 0.26rem;
                color: #666;
                .title {
                    padding-bottom: 0.26rem;
                }
            }
        }
        .title {
            padding: 0.6rem;
            font-size: 0.36rem;
            img {
                width: 0.8rem;
                margin-bottom: 0.32rem;
            }
        }
        .query {
            padding-bottom: .5rem;
            background: #fff;
            height: 100%;
            font-size: 0.26rem;
            color: #666;
            img {
                -webkit-animation: rotating 1s infinite linear;
                animation: rotating 1s infinite linear;
            }
            .title {
                padding-bottom: 0.26rem;
            }
        }

    }

    @keyframes rotating {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

</style>
